<template>
  <div class="right-wrong-container">
    <div class="slide-container" :class="{ 'slide-left': isAnalysis }">
      <!-- 答题视图 -->
      <div class="answer-view">
        <div class="content-wrapper">
          <!-- 左侧材料区 -->
          <div v-if="leftContent" class="left-content">
            <div class="content-box" v-html="leftContent"></div>
          </div>

          <!-- 右侧答题区 -->
          <div class="right-ask-in">
            <div class="header-top">提示语占位符</div>
            <div class="cen-ask">
              <askStatus :is-analysis="isAnalysis" :is-correct="checkAllAnswers()" />
              <div class="right-content" :class="{ 'full-width': !leftContent }">
                <div class="question-content" v-html="questions.content"></div>
                <div class="blank-groups">
                  <div v-for="(group, groupIndex) in questions.groups" :key="groupIndex" class="blank-group">
                    <div class="blank-title">Blank ({{ toRoman(groupIndex + 1) }})</div>
                    <div class="options-list">
                      <div v-for="(option, optionIndex) in group.options" :key="optionIndex" 
                           class="option-item"
                           :class="{ 'selected': isSelected(groupIndex, optionIndex) }"
                           @click="handleSelect(groupIndex, optionIndex)">

                        <div class="option-box">
                          <div class="options-boxs">
                            <div class="box-around"></div>
                          </div>
                          <span class="option-label">{{ option.label }}</span>
                          <span class="option-text">{{ option.text }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="header-top bottom">
              <div class="c-bottom">
                提示语占位符
              </div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AskStatus from '../askStatus.vue'

const props = defineProps({
  questions: {
    type: Object,
    required: true
  },
  leftContent: {
    type: String,
    default: ''
  },
  isAnalysis: {
    type: Boolean,
    default: true
  },
  correctAnswers: {
    type: Array,
    required: true
  }
})

const userAnswers = ref(Array(props.questions.groups?.length).fill(null))

const toRoman = (num) => {
  const roman = ['i', 'ii', 'iii']
  return roman[num - 1] || num
}

const handleSelect = (groupIndex, optionIndex) => {
  userAnswers.value[groupIndex] = optionIndex
  emit('update:answers', userAnswers.value)
}

const isSelected = (groupIndex, optionIndex) => {
  return userAnswers.value[groupIndex] === optionIndex
}

const checkGroupAnswer = (groupIndex) => {
  return userAnswers.value[groupIndex] === props.correctAnswers[groupIndex]
}

const checkAllAnswers = () => {
  return props.correctAnswers.every((answer, index) => answer === userAnswers.value[index])
}

const getCorrectAnswerText = (groupIndex) => {
  const correctIndex = props.correctAnswers[groupIndex]
  return props.questions.groups[groupIndex].options[correctIndex]?.text || ''
}

const emit = defineEmits(['update:answers'])
</script>

<style lang="scss" scoped>
.answer-view{
  width:100%;
  display:flex;
}
.right-content{
  flex: 1;
}
.right-wrong-container {
  position: relative;
  overflow: hidden;

  .slide-container {
    display: flex;
    width: 100%;
    transition: transform 0.3s ease;

    // &.slide-left {
    //   transform: translateX(-50%);
    // }
  }

  .content-wrapper {
    display: flex;
    gap: 20px;
    flex:1;
  // width:100%;

    .left-content {
      flex: 1;
      
      .content-box {
        border-right: 1px solid #dcdfe6;
        // padding: 20px;
        height: 100%;
      }
    }
  }

  .right-ask-in {
    flex: 1;

    .header-top {
      background-color: #D3D3D3;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      margin-bottom: 20px;
      &.bottom{
        width:100%;
        background-color: #fff;
        .c-bottom{
          width:200px;
          background-color: #D3D3D3;
          height: 100%;
          display: flex;
      align-items: center;
      justify-content: center;
        }
      }
    }

    .cen-ask {
      display: flex;
    }
  }

  .question-content {
    margin-bottom: 20px;
    line-height: 1.6;
  }

  .blank-groups {
    display: flex;
    // flex:1;
    width:100%;
    .blank-group {
      margin-bottom: 20px;
      flex:1;

      .blank-title {
        font-weight: 500;
        margin-bottom: 10px;
      }

      .options-list {
        // display: grid;
        // grid-template-columns: repeat(3, 1fr);
        // gap: 15px;

        .option-item {
          border: 1px solid #dcdfe6;
          padding: 10px;
          cursor: pointer;
          transition: all 0.3s;

          &.selected {
          
          .options-boxs{
            border-color: #126983;
            .box-around{
                background-color: #126983;
            // color: #fff;
            border-color: #126983;
            }
          }
          }


          .option-box {
            display: flex;
            gap: 8px;

            .option-label {
              font-weight: 500;
            }
          }
        }
      }
    }
  }

  .analysis-content {
    .group-analysis {
      margin-bottom: 20px;

      .correct-answer {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
      }
    }
  }
}
.options-boxs{
  display: flex;
  justify-content: center;
  align-items: center;
  width:24px;
  height:24px;
  border-radius: 50%;
  border:1px solid #ccc;
  .box-around{
    // display: none;
    width:16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #fff;
  }
}
</style>